<template>
	<view class="y-flex com-list position-relative">
		<list ref="list" :id="dataId" class="y-flex-1" :bounce="bounce" :loadmoreoffset="loadmoreoffset" :offset-accuracy="offsetAccuracySync" @[scrollEvent]="handleScroll" @loadmore="handleLoadmore">
			<cell v-if="cellTopShow">
				<view :style="{'background-color': topColor}" style="height: 0.1px;" ref="top"></view>
			</cell>
			<slot></slot>
			<refresh :display="display" @pullingdown="handlePullingdown" @refresh="handleRefresh" v-if="pulldownable">
				<view class="y-flex y-align-center" style="margin-top: -20px;">
					<view style="height: 100rpx;"></view>
					<image class="com-list-refresh" :src="refreshImage || '/static/refresh1.gif'" mode="heightFix"></image>
					<text class="fs-28 mt-15 mb-15" :style="{color: refreshTextColor}">{{refreshText}}</text>
				</view>
			</refresh>
		</list>
		<view class="com-list-back-top-box" v-if="backTopShow && scrollTop >= 1000" @tap="backTop">
			<slot name="backTop">
				<view class="com-list-back-top y-flex y-align-center y-justify-center">
					<com-icon name="top" color="#fff" size="40"></com-icon>
				</view>
			</slot>
		</view>
	</view>
</template>

<script>
	import SkinColor from '@/assets/skin/index.js'
	const dom = uni.requireNativePlugin('dom')
	export default {
		name: 'ComList',
		props: {
			dataId: {
				type: String,
				default: ''
			},
			refreshImage: {
				type: String,
				default: ''
			},
			//开启下拉刷新
			pulldownable: {
				type: Boolean,
				default: false
			},
			//开启滚动事件
			enableScrollEvent: {
				type: Boolean,
				default: false
			},
			//滚动事件触发距离
			offsetAccuracy: {
				type: [String, Number],
				default: 10
			},
			loadmoreoffset: {
				type: [String, Number],
				default: 100
			},
			//展示返回顶部按钮
			backTopShow : {
				type: Boolean,
				default: false
			},
			cellTopShow: {
				type: Boolean,
				default: true
			},
			//开启返回顶部动画
			backTopAnimated: {
				type: Boolean,
				default: true
			},
			bounce: {
				type: Boolean,
				default: false
			},
			topColor: {
				type: String,
				default: ''
			}
		},
		computed: {
			skinMode () {
				return this.$store.getters['setting/GET_SKIN_MODE']
			},
			refreshTextColor () {
				return SkinColor[this.skinMode].color_2
			},
			scrollEvent () {
				return (this.enableScrollEvent || this.backTopShow) ? 'scroll' : 'unknow'
			},
			offsetAccuracySync () {
				return this.enableScrollEvent ? this.offsetAccuracy : 500
			}
		},
		data () {
			return {
				display: 'show',
				pulldownState: '',
				refreshText: '',
				scrollTop: 0
			}
		},
		methods: {
			handlePullingdown (e) {
				const threshold = e.pullingDistance
				if ( threshold >= 195 ) {
					this.refreshText = '拉疼我啦，松手刷新'
				} else {
					this.refreshText = '哎呀，用点力继续下拉'
				}
			},
			handleRefresh () {
				this.refreshText = '正在努力刷新中'
				this.$emit('pulldown', (state) => {
					this.pulldownComplete(state)
				})
			},
			pulldownSuccess () {
				this.pulldownComplete('success')
			},
			pulldownFail () {
				this.pulldownComplete('fail')
			},
			pulldownComplete (state) {
				this.pulldownState = state
				this.refreshText = state == 'fail' ? '刷新好像遇到点问题~~' : '成功刷新到数据了哦~~'
				setTimeout(() => {
					this.resetPulldown()
				}, 200)
			},
			resetPulldown () {
				this.display = 'hide'
				setTimeout(() => {
					this.display = 'show'
					this.pulldownState = ''
					this.refreshText = '哎呀，用点力继续下拉'
				}, 500)
			},
			handleScroll (e) {
				this.scrollTop = Math.abs(e.contentOffset.y)
				this.$emit('scroll', e)
			},
			backTop (animated) {
				if ( typeof animated == 'boolean' ) {
					dom.scrollToElement(this.$refs.top, { offset: 0, animated: false })
					this.scrollTop = 0
				} else {
					dom.scrollToElement(this.$refs.top, { offset: 0, animated: this.scrollTop > 10000 ? false : this.backTopAnimated })
					if ( this.scrollTop > 10000 ) this.scrollTop = 0
				}
			},
			handleLoadmore () {
				this.$emit('loadmore')
			},
			resetLoadmore() {
			    this.$refs.list.resetLoadmore()
			},
			setSpecialEffects (e) {
				this.$refs.list.setSpecialEffects(e)
			}
		}
	}
</script>

<style>
	.com-list-refresh {
		height: 100rpx;
	}
	.com-list-back-top-box {
		position: absolute;
		bottom: 200rpx;
		right: 50rpx;
	}
	.com-list-back-top {
		width: 70rpx;
		height: 70rpx;
		border-radius: 70rpx;
		background-color: rgba(0,0,0,0.2);
	}
</style>